<template>
    <div class="car">
        <van-checkbox-group v-model="result"> 
            <van-checkbox
                class="check"
                :name="item"
                v-for="item in cartList"
                :key="item.id"
                label-disabled
                @click="singleCheckFn(item)"
            >
                <van-swipe-cell>
                    <van-card
                        :price="item.retail_price"
                        :title="item.goods_name"
                        :thumb="item.list_pic_url">
                    </van-card>
                    <template #right>
                        <van-button square text="删除" @click="delFn(item)" type="danger" class="delete-button" />
                    </template> 
                    <van-stepper
                        class="step"
                        v-model="item.number" 
                        @change="addStep(item)"
                    />           
                </van-swipe-cell>
            </van-checkbox>
        </van-checkbox-group>
        <!-- 提交订单栏 -->
        <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="checkAll" @click="checkAllFn">全选</van-checkbox>
            <template #tip>
                你的收货地址不支持同城送, 
                <span
                    @click="onClickEditAddress"
                    style="color: black; text-decoration: underline"
                >修改地址</span>
            </template>
        </van-submit-bar>
    </div>
</template> 

<script>
// 引入购物车数据接口
import { getCarData , deleteGoods , changeChecked , getCartUpdate} from "@/utils/http";
export default {
    name: "Car",
    props: [""],
    data() {
        return {
            result: [],  // 选中的商品的集合
            cartList: [], // 购物车数组
            checkAll: false, // 全选状态
            totalPrice: 0, // 总价
        };
    },
    computed:{},
    created() {
        getCarData().then((res)=>{
            console.log(res);
            this.cartList = res.data.data.cartList;
            // 初始化单选状态
            this.cartList.forEach((item)=>{
                // console.log(item);
                if(item.checked == 1){
                    this.result.push(item);
                }
            });
            // 初始化全选状态
            if(this.cartList.length > 0){
                this.checkAll = this.cartList.every((item)=>{
                    // console.log(item);
                    return item.checked == 1;
                })
            }else{
                this.checkAll = false;
            }
            // 初始化商品总价赋值
            this.totalPrice = res.data.data.cartTotal.checkedGoodsAmount * 100;
        })
    },
    methods: {
        addStep(item){
            // console.log(item);
            // 商品步进器
            let params = {
                goodsId: item.goods_id,
                id: item.id,
                number: item.number,
                productId: item.product_id,
            } 
            getCartUpdate(params).then((res)=>{
                // console.log(res);
                this.cartList = res.data.data.cartList;
                // 重新判断单选状态
                // 先清空选中项 
                this.result = [];
                this.cartList.forEach((item)=>{
                    // console.log(item);
                    if (item.checked == 1) {
                        this.result.push(item);
                    }
                })
                // 重新判断全选状态
                if (this.result.length == this.cartList.length && this.result.length != 0) {
                    this.checkAll = true;
                } else {
                    this.checkAll = false;
                }
                // 重新计算价格
                this.totalPrice = res.data.data.cartTotal.checkedGoodsAmount * 100;
            })
        },
        checkAllFn(){
            // console.log(this.checked)
            // 全选或者全不选
            let productIds = this.cartList.map((item) => {
                return item.product_id;
            });
            // console.log(productIds.join(","));
            if (this.checkAll) {
                this.result = this.cartList;
            } else {
                this.result = [];
            }
            // console.log(this.result);
            let params = {
                isChecked: this.checkAll ? 1 : 0,
                productIds: productIds.join(","),
            };
            changeChecked(params).then((res) => {
                // console.log(res);
                // 商品总价赋值
                this.totalPrice = res.data.data.cartTotal.checkedGoodsAmount * 100;
            });
        },
        singleCheckFn(item){
            // 单选事件
            // console.log(this.result);
            if(this.result.length == this.cartList.length && this.result.length!=0){
                this.checkAll = true;
            }else{
                this.checkAll = false;
            }
            let flag = this.result.includes(item);
            // console.log(flag);
            // 获取当前的点击状态
            changeChecked({
                isChecked: flag ? 1 : 0,
                productIds: item.product_id,
            }).then((res) => {
                // 商品总价赋值
                this.totalPrice = res.data.data.cartTotal.checkedGoodsAmount * 100;        
            });
        },
        delFn(item){
            // 删除事件
            // console.log(item);
            deleteGoods({productIds: String(item.product_id)}).then((res)=>{
                // console.log(res);
                // 重新渲染购物车数据
                this.cartList = res.data.data.cartList;
                // 初始化单选状态
                this.result = []; // 清空
                this.cartList.forEach((item) => {
                    // console.log(item1, index);
                    //删除前如果有选中的，删除后就放入到选中项内
                    if (item.checked == 1) {
                        this.result.push(item);
                    }
                })
                // 判断全选状态
                if (this.result.length == this.cartList.length && this.result.length != 0) {
                    this.checkAll = true;
                } else {
                    this.checkAll = false;
                }
                // 重新计算商品总价赋值
                this.totalPrice = res.data.data.cartTotal.checkedGoodsAmount * 100;
            })
        },
        onSubmit(){
            // 提交订单
            this.$toast("跳转支付");
        },
        onClickEditAddress(){
            // 修改地址
        },
    },
};
</script>
<style lang="less" scoped>
.car{
    .check{
        position: relative;
        .step{
            position: absolute;
            top: 45px;
            right: 5px;
        }
    }
    .delete-button {
        height: 100%;
    }
    /deep/.van-checkbox__label {
        flex: 1;
    }
    /deep/.van-submit-bar{
        margin-bottom: 50px;
    }
    /deep/.van-button--mini {
        width: 50px;
        height: 30px;
        padding: 0 4px;
        font-size: 10px;
        color: black;
    }
}
</style>